<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>chess</title>
		<meta http-equiv="X-UA-Compatible" content="edge" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="${base}/static/css/chess.css" />
		<script type="text/javascript" src="${base}/static/js/jquery-1.3.1.js"></script>
		<script type="text/javascript" src="${base}/static/js/test.js" charset="UTF-8"></script>
		<script type="text/javascript" src ="dwr/util.js"></script>   
        <script type="text/javascript" src= "dwr/engine.js"></script> 
        <script type="text/javascript" src= "dwr/interface/messagePush.js" ></script>
        
        <script type="text/javascript" >
		    function onPageLoad(){  
                 messagePush.onPageLoad("<%=request.getSession().getId()%>");
            } 
             
             var BLANK="a";
             var WHITE="b";
             var BLACK="c";
             var currentColor=BLACK;
             var userColor,myName,opName;
             $(function(){
             	init();
             	$("#search>input[name='myName']").focus(function(){
             		if($(this).val()=="请输入你的名字"){
             			$(this).val("");
             		}
             	})
             	.blur(function(){
             		if($(this).val()==""){
             			$(this).val("请输入你的名字");
             		}
             	});
             	$("#searchBtn").click(function(){
             		var myName=$("#search>input[name='myName']").val();
             		$.post("chessServlet",{myName:myName},function(data){
             			if(data==undefined){
             				alert("undefined");
             				return;
             			}
             				
             			var roomID=data.roomID;
             			myName=data.myName;
             			opName=data.opponentName;
             			var color=data.color;
             			$("#roomID").text("房间号："+roomID);
             			if(color==BLACK){				
             				$("#myName").text(myName+"(黑)");
             				$("#opponentName").text(opName+"(白)");
             				userColor=BLACK;
             			}
             			else{
             				$("#myName").text(myName+"(白)");
             				$("#opponentName").text(opName+"(黑)");
             				userColor=WHITE;
             			}
             			$("#wait").fadeOut(500,function(){
             				$("#roomInfo").fadeIn(1000,function(){
             					$("#main").fadeIn(1000);
             				})
             			});
             		},"json");
             		$("#search").hide();
             		$("#wait").fadeIn(1000);
             	});
             	$("div.cell").click(function(){	
             		//if(userColor!=currentColor){
             		//	alert("不归你下");
             		//	return;
             		//}
             		
             		if(getColor($(this))==BLANK){
             			var canPut=false;
             			for(var i=1;i<=8;i=i+1){
             				var targetCell=getCellForPosition($(this),i);
             				if(targetCell!=null
             						&&getColor(targetCell)!=BLANK
             						&&getColor(targetCell)!=currentColor
             						&&canTurn(targetCell,i)){
             					doTurn(targetCell,i);							
             					canPut=true;
             				}
             			}
             			if(canPut==true){
             				putChess($(this));	
             				messagePush.send('<%=request.getSession().getId()%>',Number($(this).attr("col"))-1,Number($(this).parent().attr("row"))-1);
             			}
             		}
             	});
             });
             //判断是否能下子
             function canTurn(currentCell,position){
             	var targetCell=getCellForPosition(currentCell,position);	
             	if(targetCell==null||getColor(targetCell)==BLANK){
             		return false;
             	}
             	else if(getColor(targetCell)!=currentColor){		
             		return canTurn(targetCell,position);
             	}
             	else{
             		return true;
             	}
             }
             //翻棋
             function doTurn(currentCell,position){
             	inverseChess(currentCell);
             	var targetCell=getCellForPosition(currentCell,position);
             	if(getColor(targetCell)!=currentColor){
             		doTurn(targetCell,position);
             	}
             }
             //获得单元格的颜色
             function getColor(cell){
             	var path=cell.css("background-image");
             	return path.substring(path.lastIndexOf(".")-1,path.lastIndexOf("."));	
             }
             //改变单元格的颜色
             function turnCellToColor(cell,color){
             	var path=cell.css("background-image");
             	var part1=path.substring(0,path.lastIndexOf(".")-1);
             	var part2=path.substring(path.lastIndexOf("."));
             	var newPath=part1+color+part2;
             	cell.css("background-image",newPath);
             }
             //下子
             function putChess(cell){	
             	turnCellToColor(cell,currentColor);	
             	if(currentColor==BLACK){
             		currentColor=WHITE;
             	}
             	else{
             		currentColor=BLACK;
             	}
             }
             //翻过来
             function inverseChess(cell){
             	if(getColor(cell)==BLACK){							
             		turnCellToColor(cell,WHITE);
             	}
             	else if(getColor(cell)==WHITE){
             		turnCellToColor(cell,BLACK);
             	}
             }


             function getCellForPosition(cell,position){
             	switch(position){
             	case 1:{//上
             		var parent=cell.parent();
             		var index=parent.children().index(cell);
             		var targetParent=parent.prev();		
             		return targetParent.size()>0?targetParent.children(":eq("+index+")"):null;
             	}
             	case 2:{//右上
             		var parent=cell.parent();
             		var index=parent.children().index(cell);
             		var targetParent=parent.prev();	
             		if(targetParent.size()==0) return null;
             		var targetCell=targetParent.children(":eq("+(index+1)+")");
             		return targetCell.size()>0?targetCell:null;
             	}
             	case 3:{//右
             		return cell.next().size()>0?cell.next():null;
             	}
             	case 4:{//右下
             		var parent=cell.parent();
             		var index=parent.children().index(cell);
             		var targetParent=parent.next();	
             		if(targetParent.size()==0) return null;
             		var targetCell=targetParent.children(":eq("+(index+1)+")");
             		return targetCell.size()>0?targetCell:null;
             	}
             	case 5:{//下
             		var parent=cell.parent();
             		var index=parent.children().index(cell);
             		var targetParent=parent.next();		
             		return targetParent.size()>0?targetParent.children(":eq("+index+")"):null;
             	}
             	case 6:{//左下
             		var parent=cell.parent();
             		var index=parent.children().index(cell);
             		var targetParent=parent.next();	
             		if(targetParent.size()==0) return null;
             		var targetCell=targetParent.children(":eq("+(index-1)+")");
             		return targetCell.size()>0?targetCell:null;
             	}
             	case 7:{//左
             		return cell.prev().size()>0?cell.prev():null;
             	}
             	case 8:{//左上
             		var parent=cell.parent();
             		var index=parent.children().index(cell);
             		var targetParent=parent.prev();	
             		if(targetParent.size()==0) return null;
             		var targetCell=targetParent.children(":eq("+(index-1)+")");
             		return targetCell.size()>0?targetCell:null;
             	}
             	default:return null;
             	}
             }


             //初始化
             function init(){
             	for(var i=0;i<8;i=i+1){
             		$("#chessBoard").append($("<div row='"+(i+1)+"' />").addClass("row"));
             	}	
             	for(var i=0;i<8;i=i+1){
             		$("#chessBoard>div.row").append($("<div col='"+(i+1)+"' />").addClass("cell"));
             	}
             	$("#chessBoard>div:first>div:first").addClass("corner_01_a");
             	$("#chessBoard>div:first>div:last").addClass("corner_02_a");
             	$("#chessBoard>div:last>div:last").addClass("corner_03_a");
             	$("#chessBoard>div:last>div:first").addClass("corner_04_a");
             	
             	$("#chessBoard>div:first>div:not(:first:last)").addClass("side_01_a");
             	$("#chessBoard>div:last>div:not(:first:last)").addClass("side_03_a");
             	$("#chessBoard>div:not(:first:last)>div:first-child").addClass("side_04_a");
             	$("#chessBoard>div:not(:first:last)>div:last-child").addClass("side_02_a");
             	
             	$("#chessBoard>div:not(:first:last)>div:not(:first-child:last-child)").addClass("line_a");
             	$("#chessBoard>div:eq(3)>div:eq(3),#chessBoard>div:eq(4)>div:eq(4)").addClass("line_c");
             	$("#chessBoard>div:eq(3)>div:eq(4),#chessBoard>div:eq(4)>div:eq(3)").addClass("line_b");
             }
             
             
             
             
           //这个函数是提供给后台推送的时候 调用的
             function show(col,row){ 
              	var canPut=false;
              	var obj=$("#chessBoard>div:eq("+row+")>div:eq("+col+")");
     			for(var i=1;i<=8;i=i+1){
     				var targetCell=getCellForPosition($(obj),i);
     				if(targetCell!=null
     						&&getColor(targetCell)!=BLANK
     						&&getColor(targetCell)!=currentColor
     						&&canTurn(targetCell,i)){
     					doTurn(targetCell,i);							
     					canPut=true;
     				}
     			}
     			if(canPut==true){
     				putChess($(obj));	
     			}
             }
        </script>
	</head>
	<body onload="dwr.engine.setActiveReverseAjax(true);dwr.engine.setNotifyServerOnPageUnload(true);onPageLoad()">
		<div id="search">
			<input type="text" name="myName" value="请输入你的名字"/>
			<input id="searchBtn" type="button" value="找对手"/>
		</div>
		
		userId:<%=request.getSession().getId()%>
		<div id="wait">
			<h1>寻找对手中......</h1>
		</div>
		<div id="roomInfo">
			<div id="myName"></div>
			<div id="roomID"></div>
			<div id="opponentName"></div>
		</div>
		<div id="main">
			<div id="myChat">
				<textarea></textarea>
			</div>
			<div id="chessBoard"></div>
			<div id="opponentChat">
				<textarea></textarea>
			</div>
		</div>
	</body>
</html>
